import React, {PureComponent} from 'react';
import {List, InputItem, WhiteSpace, Modal, WingBlank, Button, Toast} from 'antd-mobile';
import { login, getVerifyCode } from '../../service/api';
import styles from './index.module.less';


export default class LoginPage extends PureComponent {

    constructor(props) {
        super(props);
        this.state = {
            phone: null,
            verifyCode: null,
            countDown: 0,
            intervalId:null,
        }
    }

    /**
     * 获得验证码
     */
    getVerifyCode = () => {
        const { phone } = this.state;
        const finalPhone = phone && phone.replace(/\s+/g, '');
        if(!(/^[1][3,4,5,6,7,8,9][0-9]{9}$/.test(finalPhone))){
            Modal.alert("请输入正确的手机号！")
            return;
        }
        getVerifyCode({phone:finalPhone}).then(res => {
            if(res.status === 0) {
                const intervalId = setInterval(()=> {
                    const { countDown, intervalId } = this.state;
                    if(countDown < 0) {
                        clearInterval(intervalId);
                        this.setState({
                            countDown:0,
                            intervalId:null,
                        })
                        return;
                    }
                    this.setState({countDown: countDown - 1})
                }, 1000);
                this.setState({
                    countDown:60,
                    intervalId,
                });
            }else {
                Modal.alert(res.errorMsg);
            }
        })
    }

    /**
     * 登录
     */
    login = () => {
        const { phone, verifyCode } = this.state;
        const { getProfile } = this.props;
        const finalPhone = phone && phone.replace(/\s+/g, '');
        login({ phone: finalPhone, verifyCode}).then(res => {
            if(res.status === 0) {
                this.props.history.push('./home');
                getProfile();
            }else {
                Modal.alert(res.errorMsg);
            }
        }).catch(error => {
        })
    }

    render() {
        const {phone, verifyCode, countDown} = this.state;
        return <div className={styles.login}>
            <WingBlank className={styles.form} size="lg">
                <WhiteSpace size="lg"/>
                <List>
                    <InputItem
                        value={phone}
                        type="phone"
                        placeholder="请输入手机号"
                        onChange={value => this.setState({phone: value})}
                        extra={
                            <Button
                                disabled={countDown > 0}
                                onClick={this.getVerifyCode}
                                size="small"
                                type="ghost">
                                {countDown > 0 ? `${countDown}秒后重发`: '获得验证码'}
                            </Button>
                        }>
                        <div className={styles.icon_mobile}/>
                    </InputItem>
                    <InputItem
                        maxLength={5}
                        value={verifyCode}
                        placeholder="请输入验证码"
                        onChange={value => this.setState({verifyCode: value})}
                    >
                        <div className={styles.icon_code}/>
                    </InputItem>
                </List>
                <WhiteSpace size="lg"/>
                <Button type="primary" onClick={this.login}>登录</Button>
                <WhiteSpace size="lg"/>
            </WingBlank>

        </div>
    }
}

